body {
    background: #161616;
    margin: 0;
    padding: 0;
    font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
    color:#fff;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a {
    text-decoration:none;
    color:#00c6ff;
}

h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 20px;	margin: 0;
    text-align:center;
    color:#bbb;
}

h1 small{
    font: 0.2em normal  Arial, Helvetica, sans-serif;
    text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
    display: block;
}

h2 {
    font: 2em normal Arial, Helvetica, sans-serif;
    padding-bottom:30px;
    color:#fff;
    display:block;
}

.content{
    width:496px;
    margin:0 auto;
    position:relative;
    font-size:12px;
    line-height:2em;
    padding:30px 0px;
}
.col { width:500px; }

#skill {
    list-style:none;
    padding-top:30px;
}

#skill li {
    margin-bottom:70px;
    background:#000;
    height:5px;
    border-radius:3px;
    border-left:1px solid #111;
    border-top:1px solid #111;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
}

#skill li em {
    position:relative;
    top:-30px;
}

.expand {
    height:1px;
    margin:2px 0;
    background:#2187e7;
    position:absolute;
    box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
}

.html5       { width:70%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;       }
.css3        { width:90%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;        }
.jquery      { width:50%;  -moz-animation:jquery 2s ease-out;      -webkit-animation:jquery 2s ease-out;      }
.photoshop   { width:10%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;   }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width:10%;}  }
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width:10%;}  }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }
